Feature/heading inspector - #493
Conversation
how in the world do me create a folder via github web...
got it
added skeleton for the extension page
testing link behavior in markdown
fixed wrong link formatting
text draft
trying to add an image
…_media/test.png delete test image which I used to create the media folder via github web
added screenshot of the heading outline panel
moved image
added note to the headingsmap extension for a more reliable alternative on Chrome
added note for a more reliable alternative on Chrome
typo
✅ Deploy Preview for accessibility-developer-guide ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
|
||
| **This bookmarklet provides an efficient way to display the current webpage's heading outline, very close to how screen readers do. In addition, it has some pretty useful features like displaying potentially incorrectly hidden headings.** | ||
|
|
||
| This bookmarklet outlines headings and sections based on a pages DOM. In certain scenarios headings might be missed or misinterpreted, for example when dealing with shadow DOMs. For a more reliable tool check out the heading inspector extension for Chrome: [Heading Inspector](https://www.accessibility-developer-guide.com/setup/helper-tools/browser-extensions/heading-inspector/) |
There was a problem hiding this comment.
Suggestion: I would drop the In certain scenarios headings might be missed or misinterpreted, for example when dealing with shadow DOMs. as the bookmarklet should actually handle shadow DOM just fine: hinderlingvolkart/h123#5
There was a problem hiding this comment.
@backflip: I don’t think the problem is necessarily related to the Shadow DOM (this seems to work both with h123 as well as with HeadingsMap and heading-inspector).
The only difference I noticed is that h123, unlike the other two, ignores the aria-level attribute.
There was a problem hiding this comment.
From our meeting: The difference is that the bookmarklet does not pick up elements with a role of heading set via JavaScript.
There was a problem hiding this comment.
On the other hand, as discovered by @christophdubach: The bookmarklet can optionally list hidden headings.
|
|
||
| **HeadingsMap generates an index of any web document structured with headings and sections. It shows the headings structure, the errors in the structure (ie. incorrect levels), and it works as HTML5 Outliner too.** | ||
|
|
||
| This extension outlines headings and sections based on a pages DOM. In certain scenarios headings might be missed or misinterpreted, for example when dealing with shadow DOMs. For a more reliable tool check out the heading inspector extension for Chrome: [Heading Inspector](https://www.accessibility-developer-guide.com/setup/helper-tools/browser-extensions/heading-inspector/) |
There was a problem hiding this comment.
|
This is awesome, very cool approach! /cc @eins78 |
|
@RA11y1, @backflip: Ich frage mich, ob wir sowohl Andererseits haben beide ihre Vor- und Nachteile:
|
There was a problem hiding this comment.
Even if it’s technically allowed, it might not be ideal that this screenshot shows three <h1> elements, as this could confuse people.
h123 - Release v1.2.0
|
@rudigier, FWIW: This will only work with the very specific SBB-implementation: hinderlingvolkart/h123@e5951b8#diff-37b4fddc8e59579d297e97cc83b70560b61fd3eec047bac19e56472cc2e14e2bR158 A custom element with a heading role neither requires |
differences are less significant as previously thought
removed section referring to the headings inspector, since differences are less significant as previously thought
rewrote the intro text. No reference to h123 anymore, no need to tell as it seems kinda obvious. Mentioned the edge case for javascript set heading roles for a specific case where this extension adds value
4 participants
PR adds a new page for a chrome extension that more reliably outlines the heading structure of a page.
The page gives a short introduction and lists its features. Additionally, a note was added on the pages for the headingmap extension and the h123 bookmarklet, referencing the heading inspector as a more reliable alternative.